<template>
  <!-- 自定义组件,除了地址组件其他目前不能用 TODO: -->
  <addre
    v-if="type == 'addre' && filter"
    :size="size"
    v-model="editValue"
    :filter="filter"
    :style="{'width':width}"
  />
  <addre
    v-else-if="type == 'addre' && !filter"
    :size="size"
    v-model="editValue"
    :style="{'width':width}"
  />
  <el-input
    v-else-if="type == 'sfzh'"
    v-model="editValue"
    :size="size"
    :maxlength="18"
    :style="{'width':width}"
    @input="editValue = editValue.replace(/^\.+|[^\d.]/g, '')"
  ></el-input>
  <el-input
    v-else-if="type == 'email'"
    v-model="editValue"
    :size="size"
    :style="{'width':width}"
    @input="
      editValue = editValue.replace(
        /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
        ''
      )
    "
  ></el-input>
  <el-input
    v-else
    :size="size"
    v-model="editValue"
    clearable
    :style="{'width':width}"
    :placeholder="placeholder ? placeholder : '请输入'"
    :maxlength="maxlength ? maxlength : 4000"
    :minlength="minlength ? minlength : 0"
  />
</template>

<script>
import Addre from "@comp/base/Addre.vue";
export default {
  components: { Addre },
  props: {
    //v-model绑定
    value: {
      type: [String, Object],
      required: true,
    },
    //类型
    type: {
      type: String,
      validator: function(value) {
        return (
          ["addre", "sfzh", "email", "mobile"].findIndex(
            (item) => item == value
          ) >= 0
        );
      },
    },
    //大小，支持'medium','small','mini',默认medium
    size: {
      type: String,
      validator: function(value) {
        return (
          ["medium", "small", "mini"].findIndex((item) => item == value) >= 0
        );
      },
      default: "medium",
    },
    width:{type:String,default:'100%'},
    //输入前提示语
    placeholder: String,
    //原生属性，最大长度，最小长度
    maxlength: Number,
    minlength: Number,
    filter:{type:Function,default:(list)=>{return list}},
  },
  data() {
    return {
      editValue: this.value,
    };
  },
  watch: {
    editValue(val) {
      this.$emit("input", val);
    },
    value(val){
      this.editValue = val
    }
  },
};
</script>

<style lang="less" scoped>
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
